DevTools/RoadmapDec2011
|
THIS PAGE MAY BE OUTDATED |
| This article is in parts, or in its entirety, outdated. Hence, the information presented on this page may be incorrect, and should be treated with due caution until this flag has been lifted. Help by editing the article, or discuss its contents on the talk page. |
 |
Developer Tools 2012 Roadmap | |
| Owner: Kevin Dangoor | Updated: 2018-04-19 | |
| The web must be easier to develop for than proprietary platforms. One way in which Mozilla helps keep the web out in front is by making Firefox the best dynamic environment for building modern web applications. In 2012, we'll build on the momentum started in 2011 to deliver a useful and easy-to-use suite of tools. | ||
Contents
Developer Tools 2012
Kevin Dangoor kdangoor@mozilla.com December 14, 2011
comments welcome! The best place for discussion is on the dev-apps-firefox mailing list
Vision
The web must be easier to develop for than proprietary platforms.
One way in which Mozilla helps keep the web out in front is by making Firefox the best dynamic environment for building modern web applications.
Themes
The details are in the sections that follow this one but if you want just the high level view of 2012 for developer tools, this is it:
- Bundled tools for the most common tasks (page styling, JavaScript debugging, viewing details of network requests and page resources)
That is the most important thing we are doing, because everything else we want to build in 2012 and beyond relies on the basics being there and being solid. Beyond delivering on great new tools, we will also seek to:
- Create a coherent tools plan for add-ons, apps, mobile (working with the other teams in those areas)
- Continue to engage web developers in building the best tools for Firefox
Bundled Tools for the Most Common Tasks
Web developers should be able to count on any build of Firefox they choose having fast, well-tested tools that they can use in working on their applications and sites.
The tools they have access to should support all of the common tasks well and provide places for add-ons to handle the less common tasks.
What are the common tasks today (1)?
- Manipulating CSS styles to get the desired look and often saving the end result to source files
- Tweaking HTML in support of CSS work
- Experimenting with JavaScript
- Looking at how other sites implement their layouts in CSS
- Making sure that their code will work across the browsers they need to support
- Inspection of cookies, localStorage, app cache and other page resources
- Viewing page load details (how long the page took to load, how long the various resources took)
- Looking at the details of a specific network request (headers, JSON payloads, etc.)
- Setting breakpoints and watches and stepping through JavaScript code
- Figuring out what is making their application slower than they'd like
Inside each of these tasks are many smaller features that are part of the total developer experience. We have already done considerable development in support of the common tasks. In 2012, we want to provide a great user experience for the most common tasks.
Here are some examples of less common or more advanced tasks:
- working with newer browser features
- managing IndexedDB databases
- working with more complex CSS constructs like gradients and animations
- needs of a subset of the developer population
- debugging mobile-specific layouts and code (for example, touch events)
- tackling memory usage issues
- working with "compiled" JavaScript and CSS (minified files, CoffeeScript, LESS, SASS/SCSS, Stylus)
- things that they didn't realize they could do in the browser or that the browser could do for them
We will assess these on a case-by-case basis and try to provide the features that will delight developers the most. The focus for 2012, however, is on shipping great tools for the common tasks.
New and Evolving Tools
Our biggest news in 2012 is going to be the addition of new tools for page styling, debugging and visualizing how web sites interact with the server. These tools join the Web Console and Scratchpad that were introduced in 2011. Together, these features touch on the most common needs of web developers.
As soon as a feature is "useful", we'll get it out to web developers. But, that's not the end of the story. The Mozilla community will continue to iterate on these tools with improvements at each release.
Examples of improvements that will show up over the course of the year:
- Integrated user interface with a command line that provides quick access to features
- HTML document manipulation
- autocompletion of CSS properties and values
- a web developer-oriented color picker
- a 3D view of web page structure
- features that help users spot errors in their code more quickly
- Scratchpad improvements that make it quicker to navigate and run JavaScript
- ability for the user to view the changes they made using the tools, to help them modify their source code
Though we're introducing many new tools in 2012, by the end of 2012 most will have moved well beyond a "1.0" state.
Apps and Add-ons
In 2012, Mozilla is making a big push into Apps. "Apps" are standard web technology, but with enough supporting technology to make them integrated better into the user's computing environments (desktops, smartphones and tablets).
The tools that we build for web developers should work easily for Apps, but opportunities may present themselves for helping Apps developers even more.
Firefox Add-ons are in a somewhat similar position. Much of the technology that we have could be "pointed at" an add-on to help debug that add-on.
The current plan for the Add-on Builder calls for the Builder to expand to helping in the creation and packaging of Apps, and to leverage the core source code editing functionality now built into Firefox. The latter change will pave the way for the Builder to integrate well with the rest of the tools shipped with the browser.
Mobile Development
Here are two things to consider about tools for web development for mobile devices:
- Firefox has an advantage over some of the other mobile browsers because there is very little difference between the rendering engine in Firefox Desktop and Mobile. Other browsers have a much larger difference between their mobile and desktop versions due to factors like update schedule.
- Mobile devices are not, on their own, good development devices because of their small screens and lack of keyboard.
Taken together, these two points suggest that providing a solid desktop Firefox-based toolset is the first step and can go a long way toward providing an environment with which a user can work on mobile web apps. A user can get a lot done without even having a Firefox Mobile-capable device.
The more advanced next step is to be able to take advantage of both a desktop's larger screen real estate and the unique sensors and features of the mobile device together. This could be done via a remote connection between desktop and mobile. Infrastructure for this is being built as part of the Debugger feature, but more work will be necessary to provide a good user interface for establishing connections and to extend this capability to tools other than the debugger.
Empowering Web Developers
The users of developer tools are all developers. Many of them know HTML, CSS and JavaScript very well indeed, and we will strive to make it as easy as possible for them to:
- extend the tools that ship with Firefox
- improve/contribute to the tools that ship with Firefox
- build entirely new tools of their own
At the end of 2011, we're already seeing an increase in participation in building new tools for Firefox. We will work to accelerate that in 2012.
Roadmap
The dates listed below are guidelines around when we expect a feature to ship. Consult the feature pages for more current information and details.
Q1 2012
- Inspect the styles on a page
- Change the styles on a page and see the results as you make the changes
Q2 2012
- User interface that scales to accommodate more tools and user preferences
Q3 2012
- Debugger
- Network event timeline
Q4 2012
- Tooling to assist with application performance issues
